<template>
  <BasicModal
    :visible="visible"
    title="拓扑规则"
    width="800px"
    :min-height="300"
    :height="300"
    :show-ok-btn="true"
    :show-cancel-btn="true"
    @ok="handleOk"
  >
    <div style="float: right; margin-bottom: 10px">
      <a-button type="primary" @click="handleSelect">创建规则</a-button>
    </div>
    <div style="margin-top: 10px">
      <a-table :columns="columns" :data-source="tableData" bordered>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <a style="color: red" @click="handleDelete(record)">删除</a>
          </template>
        </template>
      </a-table>
    </div>
  </BasicModal>

  <TopoRuleCreateModal :visible="showCreate" />
</template>

<script>
  import { Button, Table } from 'ant-design-vue'
  import { BasicModal } from '/@/components/Modal'

  export default {
    components: {
      'a-table': Table,
      'a-button': Button,
      BasicModal,
    },
    props: {
      topoViewId: {
        type: Number,
        default: 0,
      },
      visible: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['ok', 'cancel'],
    data: function () {
      return {
        tableData: [],
        columns: [
          {
            title: 'ID',
            key: 'id',
            dataIndex: 'id',
            align: 'center',
          },
          {
            title: 'Description',
            key: 'desc',
            dataIndex: 'desc',
            align: 'center',
          },
          {
            title: 'Regex',
            key: 'regex',
            dataIndex: 'regex',
            align: 'center',
          },
          {
            title: 'Replacement',
            key: 'replacement',
            dataIndex: 'replacement',
            align: 'center',
          },
        ],
      }
    },
    mounted() {},
    methods: {
      handleOk() {
        this.$emit('ok', this.formData)
      },
      handleDelete() {},
    },
  }
</script>
